<template>
    <el-dialog v-model="show" title="推广" width="480px">
        <div class="content">
            <div class="desc-text">
                将二维码放置在海报、包裹卡、介绍页等宣传页上，扫描二维码添加不同引流分组员工进行分流
            </div>
            <div class="qrCode-img">
                <el-image
                    :preview-src-list="[props.baseInfo?.qr_code_link]"
                    :src="props.baseInfo.qr_code_link"
                    alt="" />
            </div>
            <div class="button-info">
                <el-button type="primary" text @click="onDownloadLink">下载二维码</el-button>
                <span class="item-button-line">|</span>
                <el-button type="primary" text @click="onCopy">复制链接</el-button>
            </div>
        </div>
    </el-dialog>
</template>
<script setup lang="ts">
import useClipboard from 'vue-clipboard3';
import { ElMessage } from 'element-plus';
import { ref, computed, watch } from 'vue';
import { downloadByBlob } from '@/utils/utils';

const emit = defineEmits(['update:modelValue']);

const { toClipboard } = useClipboard();

const props = defineProps({
    modelValue: {
        type: Boolean,
        default: false
    },
    baseInfo: {
        type: Object,
        default: () => {}
    }
});

const show = computed({
    get() {
        return props.modelValue;
    },
    set(val) {
        emit('update:modelValue', val);
    }
});

/**
 * 复制
 */
const onCopy = async () => {
    const text = props.baseInfo.activity_url;
    try {
        await toClipboard(text);
        ElMessage.success('复制成功');
    } catch (e) {
        ElMessage.error('复制失败');
    }
};

/**
 * 下载
 */
const onDownloadLink = () => {
    downloadByBlob(props.baseInfo.qr_code_link, props.baseInfo.activity_name);
};
</script>
<style lang="scss" scoped>
.content {
    padding: 8px 14px;

    .desc-text {
        font-size: 14px;
        font-family: PingFangSC-Regular, 'PingFang SC';
        font-weight: 400;
        color: #696969;
        line-height: 20px;
    }

    .qrCode-img {
        margin: 24px auto 16px;
        width: 185px;
        height: 185px;

        img {
            width: 100%;
            height: 100%;
        }
    }

    .button-info {
        text-align: center;

        button {
            padding: 0;
            height: 14px;
        }

        .item-button-line {
            display: inline-block;
            margin: 0 16px;
            color: #eaeaea;
            font-size: 14px;
        }
    }
}
</style>
